import React, { Component } from 'react'
import context from '../../context'
import './Footer.css'
// 解构context里面的Consumer
const { Consumer } = context
export default class Footer extends Component {
  render() {
    return (
      <Consumer>
        {/* 这个data就是app中的todoList数据 */}
        {(data) => {
          //计算总共任务数和完成任务数
          const allTotal = data.length
          const doneTotal = data.filter((item) => item.isDone).length
          return (
            <div className="todo-footer">
              <label>
                <input type="checkbox" />
              </label>
              <span>
                <span>已完成 {doneTotal}</span> / 全部 {allTotal}
              </span>
              <button className="btn btn-danger">清除已完成任务</button>
            </div>
          )
        }}
      </Consumer>
    )
  }
}
